<template>
  <div class="app_shop">
    <div class="shop_box">
      <div class="shop_list">
        <shop-item
          v-for="item in shopList"
          :key="item.id"
          :item="item"
        ></shop-item>
      </div>
      <div class="pagination">
        <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[2, 4, 8, 12]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import ShopItem from './component/ShopItem.vue'
import { getShopList } from '@/api/shop'
export default {
  components: {
    ShopItem
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 12,
      shopList: [],
      total: 0,
      roleDetial: '',
      obj: {
        "rspCode": "0000",
        "rspInfo": "success",
        "data": [
          {
            "cripCode": "",
            "areaCode": "",
            "roleId": "two",
            "roleName": "常务副总裁"
          },
          {
            "roleId": "three",
            "roleName": "省政企应收主管"
          },
          {
            "roleId": "three",
            "roleName": "常务副总裁"
          }
        ]
      }
    }
  },
  mounted() {
    this.getShopList()
    this.changerole()
  },
  methods: {
    getShopList() {
      getShopList({ pageNum: this.pageNum, pageSize: this.pageSize }).then(res => {
        if (res.code == 200) {
          this.shopList = res.data
          this.total = res.total
        }
      })
    },
    handleSizeChange(val) {
      this.getShopList()
    },
    handleCurrentChange(val) {
      this.getShopList()
    },
    changerole() {
      let arr = ['one', 'two', 'three']
      let rolenumlist = ['', 1, 2]
      let role = 100
      this.obj.data.forEach((item, index) => {
        let num = arr.findIndex(ite => ite == item.roleId)
        if (num < role) {
          role = num
        }
        if (index == this.obj.data.length - 1) {
          this.roleDetial = rolenumlist[role]
          console.log(this.roleDetial);
        }
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.app_shop {
  .shop_box {
    width: 80%;
    height: 85%;
    margin: 20px auto 0;
    background: rgba(5, 54, 87, 0.4);
    border-radius: 10px;
    box-shadow: 0 0 10px #ccc;
    padding: 10px;
    display: flex;
    flex-direction: column;
  }
  .shop_list {
    display: grid;
    grid-template-columns: 355px 355px 355px 355px;
    grid-template-rows: 210px 210px 210px;
  }
  .pagination {
    margin: 15px auto 0;
  }
}
</style>